<template>
	<el-row style="background: #f3f6fa;">
		<el-row v-for="(item,index) in data_list" :key='index' class="ListItem">
			<el-col>
				<el-row type="flex" justify="space-between">
					<el-col :span="4">{{item.title}}</el-col>
					<el-col class="y_flex y_flex_ju_end" :span="4">
						<div  @click="toParticulars">
							查看
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col>
				<el-row :gutter="20" type="flex">
					<el-col :span="7">
						<el-image style="height: 100%;" :src='item.img'></el-image>
					</el-col>
					<el-col>
						<el-row :gutter="20">
							<el-col :span="8" v-for="(items, index) in item.list" :key="index">
								<el-card :body-style="{ padding: '0px' }">
									<img :src="items.img" class="image">
									<div style="padding: 14px;">
										<span>{{items.title}}</span>
										<div class="bottom clearfix">
											<time class="time">{{ items.time }}</time>
											<el-button type="text" class="button">操作按钮</el-button>
										</div>
									</div>
								</el-card>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row>
			<el-col style="padding: 3vh 0;" :push="8" :span="8">
				<el-pagination background layout="prev, pager, next" :total="1000">
				</el-pagination>
			</el-col>
		</el-row>
	</el-row>
</template>

<script>
	export default {
		data() {
			return {
				data_list: [{
						title: '标题',
						img: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
						list: [{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},

						]
					},
					{
						title: '标题',
						img: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
						list: [{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},

						]
					},
					{
						title: '标题',
						img: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
						list: [{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},
							{
								img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
								title: '好吃的汉堡',
								time: '123'
							},

						]
					},
				]

			}
		},
		methods:{
			toParticulars(){
				this.$router.push('/ListItem/Particulars')
				// console.log(123);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'ListItem.scss'
</style>
